<!--
  产品
 -->

<template>
  <BaseMainSlot :nowpage="nowpage">
    <template v-slot:farmtypeselectslot>
      <SelectButton
        v-if="nowpage !== 1"
        :buttonselectlist="buttonselectlist"
        @nowselectbuttonindex="topitemtype"
      />
      <el-button
        v-if="nowpage !== 1"
        class="button"
        size="mini"
        round
        @click="ret"
      >
        返回
      </el-button>
    </template>
    <!-- <template v-sklot:searchbox> </template> -->
    <template v-slot:content>
      <div v-if="nowpage === 1" class="search-box">
        <div class="search">
          <div class="label-input mr-20">
            <!-- <span class="label label-80">批次名称:</span> -->
            <div class="input">
              <el-input v-model="varietyName" clearable placeholder="请输入种养品种" @input="getTableDataList" />
            </div>
          </div>
          <div class="label-input mr-20">
            <!-- <span class="label label-80">批次名称:</span> -->
            <div class="input">
              <el-input
                v-model="batchName"
                clearable
                placeholder="请输入批次名称"
                @input="getTableDataList"
              />
            </div>
          </div>
          <img
            class="ml-20"
            src="~@/assets/action-bar-icon/search.png"
            @click="search"
          />
        </div>
      </div>
      <div v-if="nowpage === 1" class="content">
        <el-card
          v-for="(item, index) in tableData"
          :key="index"
          class="box-card w50p"
        >
          <el-col :span="4" class="left">
            <el-row :gutter="18" class="left-top">
              <img
                v-if="item.artificialProductionPicture"
                :src="
                  'data:image/png;base64,' +
                    item.artificialProductionPicture.picture
                "
                alt=""
              />
              <svg-icon
                v-if="!item.artificialProductionPicture"
                class="zzimg"
                style="font-size: 100px"
                :icon-class="'zanwutupian'"
              />
            </el-row>
            <el-row :gutter="6" class="left-bottom">
              <!-- <span>批次名称</span> -->
              <span>{{ item.batchName }}</span>
            </el-row>
          </el-col>
          <el-col :span="20" class="contents">
            <ul>
              <li v-if="item.batchNo">
                <span>|</span>
                <span> 批次码: </span>
                <!-- <b>红美人</b> -->
                <b>{{ item.batchNo }}</b>
              </li>
              <li v-if="!item.batchNo">
                <!-- <span>|</span> -->
                <!-- <span> 预计显示效果: </span> -->
                <!-- <b>红美人</b> -->
                <b>预计显示效果:</b>
              </li>
              <li>
                <span>|</span>
                <span> 种养类别: </span>
                <!-- <b>红美人</b> -->
                <b>{{ item.plantingTypeName }}</b>
              </li>
              <li>
                <span>|</span>
                <span> 种养品种: </span>
                <!-- <b>红美人</b> -->
                <b>{{ item.varietyName }}</b>
              </li>
              <li>
                <span>|</span>
                <span> 总面积: </span>
                <b>{{ item.area }}{{ item.areaUnit }}</b>
              </li>
              <li>
                <span>|</span>
                <span> 主体名称: </span>
                <b>{{ item.artificialOrganization.organizationName || "" }}</b>
              </li>
              <li>
                <span>|</span>
                <span> 种养地址: </span>
                <b>{{ item.artificialOrganization.plantAddress || "" }}</b>
              </li>
            </ul>
          </el-col>
          <!-- </div> -->
          <div v-if="item.batchNo" class="disnone">
            <div class="disblak">
              <i class="left"></i>
              <el-button
                @click="seeInformation(item)"
              >点击查看溯源信息
              </el-button>
              <i class="right"></i>
            </div>
          </div>
        </el-card>
      </div>
      <!-- </div> -->
      <ProductTraceability
        v-if="nowpage !== 1"
        ref="prouductmessage"
        :batch-from="batchFrom"
        :imgurls="imgUrl"
      />
    </template>
    <template v-slot:pagination>
      <Pagination
        v-if="nowpage === 1"
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import SelectButton from "@/components/selectbutton/index.vue";
// import vueQr from "vue-qr";
import ProductTraceability from "../components/Information-classification-and-traceability/index.vue";
// import { getToken } from "@/utils/auth";
// import batchreq from "@/api/trace-source-web/common-production/index";
// import batchreq from "@/api/trace-source-web/common-production/index";
import BaseMainSlot from "@/components/BaseMainSlot/kong.vue";
import Pagination from "@/components/Pagination/index.vue";
import { mymixin } from "@/utils/mixin";
import informationApi from "@/api/trace-source-web/manual-traceability-information-management/traceability-information-entry.js";
// import graApi from "@/api/trace-source-web/production-api/index-primary.js";
export default {
  name: "ViewTraceabilityInformation",
  components: {
    BaseMainSlot,
    SelectButton,
    ProductTraceability,
    // ProductTraceabilityTwo,
    // ProductTraceabilityThree,
    Pagination
    // vueQr
  },
  mixins: [mymixin],
  data() {
    return {
      nowpage: 1,
      topitemtypeid: 1,
      batchName: "",
      batchIdList: [],
      batchList: [],
      batchNo: "",
      batchFrom: {},
      imgUrl: "",
      dialogFormVisible: false,
      // 批次列表
      checkAll: false,
      cities: [],
      isIndeterminate: true,
      GroupHeight: "100px",
      checkboxName: "展开",
      buttonselectlist: [
        // { name: "按照类别溯源" },
        // { name: "按时间线溯源" },
        // { name: "按照日期溯源" }
      ],
      varietylist: [],
      varietyName: "",
      SRCImage: ""
      // tableData:
      // 二维码数据
      // downloadData: {
      //   url: '${this.$webSerUrl}source/#/?batchNo=3&databaseName="DB_TDW1_CXXC"',
      //   icon: require('@/assets/trace-source-manage/yezi.png')
      //   // icon: 'https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png'
      // }
    };
  },
  watch: {},
  mounted() {
    // this.traceCode()
    this.getTableDataList();
    // this.getbatchselect();
    window.addEventListener("scroll", this.load, { passive: false });
    // console.log(window.addEventListener)
  },
  destroyed() {
    window.removeEventListener("scroll", this.load, false);
  },
  methods: {
    batchDataList() {
      this.batchName = ''
      // batchreq
      //   .querybylist({ farmingTypeNo: sessionStorage.farmingTypeNo,
      //     status: this.status,
      //     varietyName: this.varietyName || undefined })
      //   .then(res => {
      //     this.batchList = res.data;
      //     this.cities = res.data;
      //     // this.varietylist = this.batchList.map(item => item.varietyName)
      //   });
      // this.getTableDataList()
    },
    // // 无限滚动加载
    load() {
    //   let vm = this;
    //   console.log("1")
    //   if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
    //     if (vm.currentPage < vm.totalPages) { // 先判断下一页是否有数据
    //       vm.currentPage = vm.currentPage + 1; // 查询条件的页码+1
    //       vm.getTableDataList(); // 拉取接口数据
    //     } else {
    //     // 到底了
    //       this.$message.warning("到底了")
    //     }
    //   }
    },
    ret() {
      this.nowpage = 1;
    },
    // 获取点击的分页index
    topitemtype(e) {
      this.topitemtypeid = e;
      this.nowpage = e;
      // console.log(e)
      // 获取表格数据
      // this.getTableDataList();
    },
    seeInformation(val) {
      this.nowpage = 2;
      this.batchNo = val.artificialOrganizationId;
      this.batchFrom = val;
      // this.imgUrl = img;
    },
    getTableDataList() {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          batchName: this.batchName,
          varietyName: this.varietyName,
          farmingTypeNo: this.topitemtypeid
        }
      };
      informationApi.artificialPageList(params).then((res) => {
        if (res.code === 1) {
          let data = res.data;
          // console.log(data)
          this.totalSize = data.totalElements;
          if (data.content.length > 0) {
            this.tableData = data.content;
          } else {
            this.tableData = [
              {
                // area: 45645,
                areaUnit: "******",
                artificialOrganization: {
                  artificialOrganizationId: 5,
                  artificialOrganizationNo: "994291148180717568",
                  contact: "******",
                  organizationName: "******",
                  plantAddress: "******"
                },
                artificialOrganizationNo: "994291148180717568",
                artificialProductionBaseInfoId: 28,
                artificialProductionBaseInfoNo: "1006161195672043520",
                artificialProductionPictureNo: "1006161195600740352",
                batchName: "******",
                plantingTypeName: "******",
                useFlag: false,
                varietyName: "******"
              },
              {
                // area: 113,
                areaUnit: "******",
                artificialOrganization: {
                  artificialOrganizationId: 5,
                  artificialOrganizationNo: "994291148180717568",
                  contact: "******",
                  organizationName: "******",
                  plantAddress: "******"
                },
                artificialOrganizationNo: "994291148180717568",
                artificialProductionBaseInfoId: 27,
                artificialProductionBaseInfoNo: "994632021989949440",
                artificialProductionPictureNo: "994632021981560832",
                batchName: "******",
                plantingTypeName: "******",
                useFlag: false,
                varietyName: "******"
              }
            ];
          }
        }
      });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    screening() {
      this.dialogFormVisible = true;
    },
    handleCheckAllChange(val) {
      let cities = this.batchList.map((item) => item.batchNo);
      this.batchIdList = val ? cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // console.log(value)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 点击展开
    checkboxHeight() {
      let GroupHeight = this.$refs.checkboxGroup.clientHeight;
      if (GroupHeight <= 120) {
        this.GroupHeight = "400px";
        this.checkboxName = "展开";
      } else {
        this.GroupHeight = "120px";
        this.checkboxName = "收起";
      }
      // return val
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
@import "~@/styles/trace.scss";
::v-deep .el-form-item__label {
  color: #000 !important;
}
::v-deep .el-form-item__content {
  .el-input__inner {
    color: #000 !important;
  }
}
::v-deep .content {
  .el-card {
    width: 48%;
  }
}
::v-deep .el-dialog__wrapper {
  .el-dialog {
    // width: 50% !important;

    // width: 55% !important;
    min-width: 55%;
    .el-dialog__body {
      .el-form {
        .checkbox {
          // background: #00000000;
          display: block;
          .el-form-item__content {
            width: 95%;
            margin-left: 5%;
            display: flex;
            position: relative;
            .checkboxck {
              position: absolute;
              top: 20px;
              left: 22px;
              // .el-button {
              // }
              .el-button--medium {
                padding: 0;
              }
            }
            .el-checkbox__input.is-indeterminate {
              .el-checkbox__inner {
                background-color: rgba(0, 110, 145, 1);
                border-color: rgba(0, 110, 145, 1);
              }
              .el-checkbox__label {
                color: rgba(0, 110, 145, 1);
              }
            }
            .el-checkbox.is-checked {
              .el-checkbox__inner {
                background-color: rgba(0, 110, 145, 1);
                border-color: rgba(0, 110, 145, 1);
              }
              .el-checkbox__label {
                color: rgba(0, 110, 145, 1);
              }
            }
            .checkbox-group {
              padding-left: 10px;
              min-height: 120px;
              overflow-y: auto;
              .el-checkbox {
                padding: 2px 10px;
                border: 1px solid rgba(220, 223, 230, 1);
                border-radius: 5px;
                margin-bottom: 10px;
              }
              .el-checkbox.is-checked {
                border: 1px solid rgba(0, 110, 145, 1);
                .el-checkbox__label {
                  color: rgba(0, 110, 145, 1);
                }
              }
            }
          }
        }
      }
    }
  }
}
.left-top {
  img {
    width: 110px !important;
    height: 110px !important;
  }
}
.left-bottom {
  span {
    width: 110px !important;
  }
}
ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    width: 50%;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    &:nth-child(odd) {
      width: 55%;
    }
    &:nth-child(even) {
      width: 45%;
    }
    span:nth-child(2) {
      // line-height: 40px;
      display: inline-block;
      width: 31%;
    }
    b {
      // height: 100%;
      // padding-top: 3px;
      // line-height: 40px;
      // display:inline-block;
      font-size: 16px;
      width: 66%;
      // overflow: hidden;
      // white-space: nowrap;
    }
  }
}
.print {
  display: flex;
}
</style>
